<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%-- <base href="<%=basePath%>"> --%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图像列表</title>
<script src="js/jquery-1.8.0.js"></script>
<script src="layer/layer.min.js"></script>
<link href="css/kisun.css" type="text/css" rel="stylesheet" />
</head>
<body>
<%-- 	<c:if test="${requestScope.picLsit==null}">
		<c:redirect url="list_action" />
	</c:if> --%>
	<ul class="zhaopian">
		<s:iterator value="picList">

			<li class="zp_list">
				<div class="zp_titleBg"></div>
				<div class="zp_titleTxt">
					<s:property value="caption" />
				</div>
				<div class="zp_content">
					<img alt="" src='<%=basePath%><s:property value ="url"/>'
						title='<s:property value ="caption"/>' width="156px"
						height="200px">
				</div>
			</li>

		</s:iterator>
		<li class="zp_list">
			<div class="zp_titleBg"></div>
			<div class="zp_titleTxt">头像1</div>
			<div class="zp_content">
				<img alt="" src='pic/1.jpg' id="zp1">
			</div>
		</li>
	</ul>
</body>
<script>
	!function(L) {

		var LYQ = {
			line : 4,
			width : 180
		};
		LYQ._class = [ 'yellow', 'green', 'blue', 'color4' ];

		LYQ.view = function(index, value, othis) {
			var nos = Math.floor(Math.random() * 4), left, fade;
			L(othis).addClass(this._class[nos]);
			L
					.layer({
						type : 1,
						page : {
							dom : othis
						},
						fix : false,
						area : [ '180px', 'auto' ],
						offset : [ '100px', '260px' ],
						zIndex : layer.zIndex,
						move : [ '.zp_titleTxt', true ],
						shade : [ 0 ],
						bgcolor : '',
						title : false,
						closeBtn : false,
						border : [ 0 ],
						success : function(layerE) {
							var _e = Math.ceil((index + 1) / LYQ.line) - 1, time, lLen = L('.xubox_layer').length;
							if (index > (LYQ.line - 1)) {
								var left = 50 + LYQ.width
										* (index - LYQ.line * _e), extop, nlayer = L(
										'.xubox_layer').eq(index - LYQ.line);
								!-[ 1, ] ? extop = nlayer.offset().top + 30
										: extop = 20 * _e + 100 * _e;
								var top = nlayer.outerHeight() + extop;
							} else {
								var left = 50 + LYQ.width * index;
							}
							!-[ 1, ] ? time = 0 : 500;
							var mate = {
								left : left,
								top : top,
								marginLeft : 0
							};
							if (!-[ 1, ]) {
								layerE.hide().animate(mate, time);
								index === lLen - 1 && layerE.show();
							} else {
								layerE.animate(mate, time);
							}
							layer.setTop(layerE);
						}
					});
		};

		LYQ.run = function() {
			var li = L('.zhaopian>li');
			L.each(li, function(index, value) {
				LYQ.view(index, value, this);
			});
		};

		if (-[ 1, ]) {
			LYQ.run();
		} else {
			layer.ready(function() {
				layer.msg('IE浏览器查看效果将会不佳', 2, 13, function() {
					LYQ.run();
				}, '温馨提示', function() {
					layer.msg('您可以选择chrome或者firefox等浏览器访问该页面', 2, 8,
							function() {
								location.reload();
							});
				});
			});
		}
	}($);
</script>
</html>